<template>
  <div>
    <!-- 添加和编辑 -->
    <input type="text" v-model="name" placeholder="姓名">
    <br>
    <input type="text" v-model="tel" placeholder="电话">
    <br>
    <button @click="add" v-show="type=='add'">确认新增</button>
    <button @click="edit" v-show="type=='edit'">确认修改</button>
    <br>
    <button @click="cancel">取消</button>
  </div>
</template>

<script>
export default {
  props: ['type'],
  data() {
    return {
      name: '',
      tel: '',
      id: ''
    }
  },
  methods: {
    add() {
      // 添加数据，向父组件传值
      if(this.name && this.tel) {
        this.$emit('add', {name: this.name, tel: this.tel, id: this.id})
        // 关闭弹窗
        this.name = '';
        this.tel = '';
        this.$emit('close')
      }
    },
    edit() {
      // 编辑状态下，点击确认按钮
      if(this.name && this.tel) {
        this.$emit('edit', {name: this.name, tel: this.tel, id: this.id})
        // 关闭弹窗
        this.name = '';
        this.tel = '';
        this.$emit('close')
      }
    },
    cancel() {
      // 关闭弹窗
      this.name = '';
      this.tel = '';
      this.$emit('close')
    },
    // 给弹窗赋值
    setValue(info) {
      this.name = info.name;
      this.tel = info.tel;
      this.id = info.id;
    }
  },
}
</script>

<style>

</style>